<script setup lang="ts">
import { reactive, ref, watch, nextTick  } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance } from 'element-plus'
import { resetFormPlus } from '@/utils/zmids'
import { nextValue, getSequenceList, insertSequenceInfo, deleteBySequenceCode, getSequenceInfo, updateSequenceInfo, 
  updateSequenceAndFieldInfo, saveSequenceFromRedis, recoverSequenceToRedis, saveSingleSequenceFromRedis, getCustomParams,
  recoverSingleSequenceToRedis } from '@uni/api/uni/sequence'
import { getDicts } from '@base/api/base/dict/data'
import { getPinyin } from '@/api/common'
import { getInfoApi } from '@/api/auth'

// 查询参数
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  sequenceCodeLike: '',
  sequenceNameLike: ''
})

// 测试获取编码参数
const testDialogParams = reactive({
  open: false,
  title: '',
  sequenceFormat: '',
  sequenceNumber: ''
})

// 新增、修改参数
const addDialogParams = reactive({
  open: false,
  title: ''
})

// 配置参数
const configDialogParams = reactive({
  open: false,
  title: ''
})

// 序列管理信息对象
const sequenceInfo = ref({
  sequenceId: undefined,
  sequenceCode: '',
  sequenceName: '',
  sequenceFormat: '',
  isSerialNumber: '',
  isUsedNumber: '',
  numberLength: undefined,
  numberStart: undefined,
  numberEnd: undefined,
  numberComplement: '',
  currentNumber: undefined,
  fieldList: [],
  deletedFieldList: []
})

// 字段类型对象
const sequenceFieldInfo = ref({
  sequenceCode: '',
  fieldType: '',
  fieldValue: '',
  sort: undefined
})

// 测试获取序列号对象
const testInfo = ref({})

const userInfo = ref({})

const costomParamList = ref([])

const sequenceFieldOptions = ref([]) // 字段类型字典

const copySequenceFieldOptions = ref([]) // 移除流水号字段的字段类型字典

const dateFormatList = ref([] ) // 日期格式字典

const showSearch = ref<Boolean>(true) // 是否展示搜索条件布尔值

const sequenceList = ref([]) // 序列管理信息列表

const total = ref<number>(0) // 序列管理信息总数

const queryForm = ref<FormInstance>() // 查询表单参数ref

const addForm = ref<FormInstance>() // 新增、修改表单参数ref

// 验证函数，验证正整数和科学计数法
function validateNumber(rule, value, callback) {
  const intValue = parseInt(value, 10);
  // 正则表达式检测科学计数法
  const isScientificNotation = /^[+-]?\d+(\.\d+)?[eE][+-]?\d+$/.test(value);
  if (isScientificNotation) {
    callback(new Error('请输入有效的正整数，不允许科学计数法'));
  } else if (!Number.isInteger(intValue) || intValue <= 0) {
    callback(new Error('请输入正整数'));
  } else {
    callback();
  }
}

// 验证函数，验证整数长度不大于numberLength
function validateNumberLength(rule, value, callback) {
  // 获取序列的长度限制
  const numberLength = sequenceInfo.value.numberLength;
  // 如果numberLength未定义，不进行长度验证
  if (numberLength === undefined) {
    callback();
    return;
  }
  if (Number(value) > 2147483647){
    callback(new Error('数字不能超过2147483647'));
    return;
  }
  // 将value转换为字符串，以便可以检查其长度
  const valueStr = value.toString();
  // 检查字符串长度是否超过了numberLength的限制
  if (valueStr.length > numberLength) {
    callback(new Error('数字长度不能超过流水号长度'));
  } else {
    callback();
  }
}

// fieldValuePlaceholder显示
function fieldValuePlaceholder() {
  if (sequenceFieldInfo.value.fieldType == 'company_code'){
    return userInfo.value.companyCode;
  }
  if (sequenceFieldInfo.value.fieldType == 'dept_code'){
    return userInfo.value.deptCode;
  }
  if (sequenceFieldInfo.value.fieldType == 'custom_param'){
    return "请输入生成编码时获取请求的参数名";
  }
}

// 新增、修改字段校验规则
const addDialogFormRule = {
  sequenceCode: [
    { required: true, message: '请输入序列编码！', trigger: 'change' },
    {
      pattern: /^[a-zA-Z][a-zA-Z0-9_-]{5,63}$/, 
      message: '序列编码必须以字母开头，长度在6-64位之间，只允许数字、字母、下划线和短横线！',
      trigger: 'change'
    }
  ],
  sequenceName: [
    { required: true, message: '请输入序列名称！', trigger: 'blur' }
  ],
  isSerialNumber: [
    { required: true, message: '请选择是否带流水号！', trigger: 'blur' }
  ],
  numberLength: [
    { required: true, message: '请输入流水号长度！', trigger: 'change' },
    { validator: validateNumber, trigger: 'change' }
  ],
  numberStart: [
    { required: true, message: '请输入流水号起始值！', trigger: 'change' },
    { validator: validateNumber, trigger: 'change' },
    { validator: validateNumberLength, trigger: 'change' }
  ],
  numberEnd: [
    { required: true, message: '请输入流水号最大值！', trigger: 'change' },
    { validator: validateNumber, trigger: 'change' },
    { validator: validateNumberLength, trigger: 'change' }
  ],
  numberComplement: [
    { required: true, message: '请输入流水号补码！', trigger: 'change' },
    {
      pattern: /^[a-zA-Z0-9]$/,
      message: '补码长度1位，只允许数字、字母！',
      trigger: 'change'
    }
  ]
}

// 获取序列管理信息列表
const getList = async () => {
  return getSequenceList(queryParams).then((res: any) => {
    sequenceList.value = res.data.list;
    total.value = res.data.total;
  })
}

// 获取字段字典信息
const getAllDicts = async () => {
  getDicts('uni_sequence_field').then(res => {
    sequenceFieldOptions.value = res.data;
    copySequenceFieldOptions.value = res.data.filter(item => item.dictValue !== 'serial_number');
  })
  getDicts('date_format').then(res => {
    dateFormatList.value = res.data;
  })
}

// 获取登录人信息
const getInfo = async () => {
  getInfoApi().then(res => {
    userInfo.value = res.data.user;
  })
}

// 选择字段类型回调
const handleSelectField = (value) => {
  sequenceFieldInfo.value.fieldValue = '';
}

// 查询
const handleQuery = () => {
  getList();
}

// 重置
const resetQuery = () => {
  resetFormPlus(queryForm.value);
  handleQuery();
}

// 新增
const handleAdd = () => {
  addDialogParams.open = true;
  addDialogParams.title = '新增';
}

// 迁移保存
const handleSaveInfo = () => {
  ElMessageBox.confirm('确认进行数据迁移保存？', '迁移保存', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    saveSequenceFromRedis().then(res => {
      ElMessage.success('数据保存成功！');
      getList();
    })
  })
}

// 迁移恢复
const handleRecoverInfo = () => {
  ElMessageBox.confirm('确认进行数据迁移恢复？', '迁移恢复', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    recoverSequenceToRedis().then(res => {
      ElMessage.success('数据恢复成功！');
      getList();
    })
  })
}

// 单个迁移保存
const handleSingleSaveInfo = (row: any) => {
  saveSingleSequenceFromRedis(row.sequenceCode).then(res => {
    ElMessage.success('数据迁入成功！');
    getList();
  })
}

// 单个迁移恢复
const handleSingleRecoverInfo = (row: any) => {
  recoverSingleSequenceToRedis(row.sequenceCode).then(res => {
    ElMessage.success('数据迁出成功！');
    getList();
  })
}

// 测试获取编码
const handleTest = (row: any ) => {
  testInfo.value.sequenceCode = row.sequenceCode;
  getCustomParams(row.sequenceCode).then(res => {
    costomParamList.value = res.data;
    costomParamList.value.forEach(param => {
      testInfo.value[param] = ''; 
    });
  })
  testDialogParams.title = '测试获取序列号';
  testDialogParams.sequenceFormat = row.sequenceFormat;
  testDialogParams.open = true;
}

// 提交新增、修改对话框
const submitForm = () => {
  addForm.value?.validate(valid => {
    if (valid) {
      if (sequenceInfo.value?.numberStart > sequenceInfo.value.numberEnd){
        ElMessage.error('起始值必须小于或等于结束值');
        return;
      }
      if (addDialogParams.title == '新增'){
        insertSequenceInfo(sequenceInfo.value).then((res) => {
          ElMessage.success('新增成功,您可在列表中查看详情！');
          cancelAdd();
          getList();
        });
      }
      if (addDialogParams.title == '修改'){
        updateSequenceInfo(sequenceInfo.value).then((res) => {
          ElMessage.success('修改成功,您可在列表中查看详情！');
          cancelAdd();
          getList();
        });
      }
    }
  })
}

// 关闭新增、修改对话框
const cancelAdd = () => {
  addDialogParams.open = false;
  resetFormPlus(addForm.value);
  sequenceInfo.value = {
    sequenceId: undefined,
    sequenceCode: '',
    sequenceName: '',
    sequenceFormat: '',
    isSerialNumber: '',
    isUsedNumber: '',
    numberLength: undefined,
    numberStart: undefined,
    numberEnd: undefined,
    numberComplement: '',
    currentNumber: undefined,
    fieldList: [],
    deletedFieldList: []
  };
}

// 配置
const handleConfig = (row: any) => {
  configDialogParams.title = '配置';
  getSequenceInfo(row.sequenceCode).then((res) => {
    sequenceInfo.value = { ...res.data };
    configDialogParams.open = true;
  })
}

// 添加字段
const handleAddField = () => {
  // 校验字段类型是否为空
  if (!sequenceFieldInfo.value.fieldType){
    ElMessage.error('请先选择字段类型！');
    return;
  }
  // 检验该字段类型是否需要输入字段值并且输入是否符合格式
  if (sequenceFieldInfo.value.fieldType === 'constant_value' || sequenceFieldInfo.value.fieldType === 'datetime' 
    || sequenceFieldInfo.value.fieldType === 'custom_param'){
    if (!sequenceFieldInfo.value.fieldValue){
      ElMessage.error('请填写字段值！');
      return;
    }

    // 新增的校验规则
    if (!/^[a-zA-Z][a-zA-Z0-9_-]*$/.test(sequenceFieldInfo.value.fieldValue)){
      ElMessage.error('字段值只能以字母开头，且只能输入数字、字母、下划线、短横线！');
      return;
    }
  }
  // 将数据push进列表
  sequenceFieldInfo.value.sequenceCode = sequenceInfo.value.sequenceCode;
  sequenceFieldInfo.value.sort = sequenceInfo.value.fieldList.length === 0 ? 1 : Math.max(...sequenceInfo.value.fieldList.map(item => item.sort)) + 1;
  sequenceInfo.value.fieldList.push({...sequenceFieldInfo.value});
  // 清空存储信息
  sequenceFieldInfo.value = {
    sequenceCode: '',
    fieldType: '',
    fieldValue: '',
    sort: undefined
  }
}

// 上移函数
const moveUp = (index) => {
  if (index > 0) {
    // 交换相邻项的位置
    [sequenceInfo.value.fieldList[index], sequenceInfo.value.fieldList[index - 1]] =
      [sequenceInfo.value.fieldList[index - 1], sequenceInfo.value.fieldList[index]];

    // 同时交换排序字段
    const tempSort = sequenceInfo.value.fieldList[index].sort;
    sequenceInfo.value.fieldList[index].sort = sequenceInfo.value.fieldList[index - 1].sort;
    sequenceInfo.value.fieldList[index - 1].sort = tempSort;
  }
};

// 下移函数
const moveDown = (index) => {
  if (index < sequenceInfo.value.fieldList.length - 1) {
    // 交换相邻项的位置
    [sequenceInfo.value.fieldList[index], sequenceInfo.value.fieldList[index + 1]] =
      [sequenceInfo.value.fieldList[index + 1], sequenceInfo.value.fieldList[index]];

    // 同时交换排序字段
    const tempSort = sequenceInfo.value.fieldList[index].sort;
    sequenceInfo.value.fieldList[index].sort = sequenceInfo.value.fieldList[index + 1].sort;
    sequenceInfo.value.fieldList[index + 1].sort = tempSort;
  }
};

// 删除函数
const removeField = (index) => {
  // 获取要删除的对象
  const removedItem = sequenceInfo.value.fieldList[index];
  // 将要删除的对象存入 deletedFieldList
  if (removedItem.sequenceFieldId){
    // 检查 deletedFieldList 是否存在并且是数组
    if (!Array.isArray(sequenceInfo.value.deletedFieldList)) {
      sequenceInfo.value.deletedFieldList = []; // 初始化为一个空数组
    }
    sequenceInfo.value.deletedFieldList.push(removedItem);
  }
  // 从 fieldList 中移除该对象
  sequenceInfo.value.fieldList.splice(index, 1);
  // 调整剩余对象的 sort 值 (index 之后的对象)
  for (let i = index; i < sequenceInfo.value.fieldList.length; i++) {
    sequenceInfo.value.fieldList[i].sort -= 1;
  }
}

// 提交配置对话框
const submitConfigForm = () => {
  updateSequenceAndFieldInfo(sequenceInfo.value).then(res => {
    ElMessage.success("配置成功，您可在列表中查看详情！");
    cancelConfig();
    getList();
  })
}

// 关闭配置对话框
const cancelConfig = () => {
  configDialogParams.open = false;
  sequenceInfo.value = {
    sequenceId: undefined,
    sequenceCode: '',
    sequenceName: '',
    sequenceFormat: '',
    isSerialNumber: '',
    isUsedNumber: '',
    numberLength: undefined,
    numberStart: undefined,
    numberEnd: undefined,
    numberComplement: '',
    currentNumber: undefined,
    fieldList: [],
    deletedFieldList: []
  };
  sequenceFieldInfo.value = {
    sequenceCode: '',
    fieldType: '',
    fieldValue: '',
    sort: undefined
  }
}

// 提交测试对话框
const submitTestForm = () => {
  nextValue(testInfo.value).then(res => {
    testDialogParams.sequenceNumber = res.data;
  })
}

// 关闭测试对话框
const cancelTest = () => {
  testDialogParams.open = false;
  testDialogParams.title = '';
  testDialogParams.sequenceFormat = '';
  testDialogParams.sequenceNumber = '';
  testInfo.value = {};
  costomParamList.value = [];
  getList();
}

// 修改
const handleEdit = (row: any) => {
  addDialogParams.title = '修改';
  getSequenceInfo(row.sequenceCode).then((res) => {
    sequenceInfo.value = { ...res.data };
    addDialogParams.open = true;
  })
}

// 删除
const handleDelete = (row: any) => {
  deleteBySequenceCode(row.sequenceCode).then((res) => {
    ElMessage.success('删除成功');
    getList();
  })
}

// 监听器
watch(
  () => sequenceInfo.value.fieldList, // 监听 fieldList 的变化
  (newFieldList) => {
    // 根据 fieldList 的变化同步修改 sequenceFormat
    const formatParts = newFieldList.map(item => {
      if (item.fieldType === 'constant_value'){
        return `${item.fieldValue}`;
      }else if (item.fieldType === 'datetime' || item.fieldType === 'custom_param'){
        return `{${item.fieldValue}}`;
      }else{
        const label = sequenceFieldOptions.value.find(field => field.dictValue === item.fieldType)?.dictLabel;
        return `{${label}}`;
      }
    });
    // 将格式组合成一个字符串，例如：TypeA-1, TypeB-2, TypeC-3
    sequenceInfo.value.sequenceFormat = formatParts.join('');
  },
  { deep: true } // 深度监听 fieldList，确保监听到数组项的增删改
)

// 编码拼音转换
const chineseTrans = (value: string) => {
  nextTick(() => {
    if (value) {
      getPinyin(value).then((res) => {
        sequenceInfo.value.sequenceCode = res.data
      })
    } else {
      sequenceInfo.value.sequenceCode = ''
    }
  })
}

// 自动填充流水号最小最大值
const handleFillUpNumber = (value: number) => {
  nextTick(() => {
    if (value) {
      sequenceInfo.value.numberStart = 1;
      const end = Math.pow(10, value) - 1;
      sequenceInfo.value.numberEnd = end < 2147483647 ? end : 2147483647;
      sequenceInfo.value.numberComplement = '0';
    }
  })
}

const init = async () => {
  getList();
  getAllDicts();
  getInfo();
}

init()

</script>

<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="120px">
        <el-form-item label="序列编码：" prop="sequenceCodeLike">
          <el-input v-model="queryParams.sequenceCodeLike" placeholder="请输入序列编码" clearable size="default"
            style="width: 240px" @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item label="序列名称：" prop="sequenceNameLike">
          <el-input v-model="queryParams.sequenceNameLike" placeholder="请输入序列名称" clearable size="default"
            style="width: 240px" @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item>
          <search-button @click="handleQuery" />
          <reset-button @click="resetQuery" />
        </el-form-item>
      </el-form>
    </el-row>
    <el-row :gutter="10" class="mb8">
      <add-button @click="handleAdd" />
      <add-button @click="handleSaveInfo" text="迁移保存" />
      <add-button @click="handleRecoverInfo" text="迁移恢复" />
      <right-toolbar v-model:showSearch="showSearch" @query-table="getList" />
    </el-row>
    <el-table :data="sequenceList" show-overflow-tooltip border style="width: 100%">
      <el-table-column prop="sequenceCode" label="序列编码" align="center" min-width="150px" />
      <el-table-column prop="sequenceName" label="序列名称" align="center" min-width="150px" />
      <el-table-column prop="sequenceFormat" label="序列格式" align="center" min-width="150px" />
      <el-table-column prop="isSerialNumber" label="是否带流水号" align="center" width="120">
        <template #default="scope">
          <yes-no-tag :value="scope.row.isSerialNumber" />
        </template>
      </el-table-column>
      <el-table-column prop="numberLength" label="流水号长度" align="center" width="100" />
      <el-table-column prop="numberStart" label="流水号起始值" align="center" width="180" />
      <el-table-column prop="numberEnd" label="流水号最大值" align="center" width="180" />
      <el-table-column prop="numberComplement" label="流水号补码" align="center" width="100" />
      <el-table-column prop="currentNumber" label="当前值" align="center" width="180" />
      <el-table-column label="操作" align="center" fixed="right" width="350">
        <template #default="scope">
          <text-add-button @click="handleConfig(scope.row)" text="配置" />
          <text-edit-button @click="handleEdit(scope.row)" text="修改" />
          <el-popconfirm confirm-button-text="确定" cancel-button-text="取消" :title="'确定要迁入' + scope.row.sequenceName + '？'"
            @confirm="handleSingleSaveInfo(scope.row)"> 
            <template #reference>
              <text-upload-button text="迁入"></text-upload-button>
            </template>
          </el-popconfirm>
          <el-popconfirm confirm-button-text="确定" cancel-button-text="取消" :title="'确定要迁出' + scope.row.sequenceName + '？'"
            @confirm="handleSingleRecoverInfo(scope.row)">
            <template #reference>
              <text-download-button text="迁出"></text-download-button> 
            </template>
          </el-popconfirm>
          <text-button @click="handleTest(scope.row)" text="测试"></text-button>
          <text-delete-button @click="handleDelete(scope.row)" :title="'是否确认删除：' + scope.row.sequenceName + '?'" />
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize" @pagination="getList" />

    <!-- 新增、修改对话框 -->
    <drag-dialog v-model="addDialogParams.open" :title="addDialogParams.title" @close="cancelAdd" width="35%" align-center>
      <el-form :model="sequenceInfo" ref="addForm" :rules="addDialogFormRule" label-width="auto"
        style="max-width: 100%">
        <el-form-item label="序列名称：" prop="sequenceName">
          <el-input v-model="sequenceInfo.sequenceName" @input="chineseTrans" v-if="addDialogParams.title === '新增'"/>
          <el-input v-model="sequenceInfo.sequenceName" v-else />
        </el-form-item>
        <el-form-item label="序列编码：" prop="sequenceCode">
          <el-input v-model="sequenceInfo.sequenceCode" :disabled="addDialogParams.title === '修改'" />
          <span v-if="addDialogParams.title === '新增'" style="color: red; font-size: small;">注意：序列编码保存后不允许修改！</span>
        </el-form-item>
        <el-form-item label="是否带流水号：" prop="isSerialNumber">
          <el-radio-group v-model="sequenceInfo.isSerialNumber" :disabled="sequenceInfo.isUsedNumber === 'Y'">
            <el-radio value="Y" size="large">是</el-radio>
            <el-radio value="N" size="large">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <div v-if="sequenceInfo.isSerialNumber == 'Y'">
          <el-form-item label="流水号长度：" prop="numberLength">
            <el-input-number :min="1" :max="10" :precision="0" v-model="sequenceInfo.numberLength" style="width: 100%"
              controls-position="right" @input="handleFillUpNumber" />
          </el-form-item>
          <el-form-item label="流水号范围：" :required="true">
            <el-row>
              <el-col :span="11">
                <el-form-item label="" prop="numberStart">
                  <el-input-number :min="1" :precision="0" v-model="sequenceInfo.numberStart" style="width: 100%"
                    controls-position="right" />
                </el-form-item>
              </el-col>
              <el-col :span="2" class="text-center">
                <span class="text-gray-500">~</span>
              </el-col>
              <el-col :span="11">
                <el-form-item label="" prop="numberEnd">
                  <el-input-number :min="1" :precision="0" v-model="sequenceInfo.numberEnd" style="width: 100%"
                    controls-position="right" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <span v-if="addDialogParams.title === '修改'" style="color: red; margin-top: 10px; font-size: small;">
                注意：如若修改，修改后的起始值和最大值不能小于已生成流水号的当前值！
              </span>
            </el-row>
          </el-form-item>
          <el-form-item label="流水号补码：" prop="numberComplement">
            <el-input v-model="sequenceInfo.numberComplement" />
          </el-form-item>
        </div>
      </el-form>
      <template #footer>
        <dialog-footer @ok="submitForm" @cancel="cancelAdd" />
      </template>
    </drag-dialog>

    <!-- 配置对话框 -->
    <drag-dialog v-model="configDialogParams.open" :title="configDialogParams.title" @close="cancelConfig" width="50%" align-center>
      <el-form :model="sequenceInfo" label-width="auto" style="max-width: 100%">
        <el-form-item label="序列名称：" prop="sequenceName">
          <el-input v-model="sequenceInfo.sequenceName" :disabled="true" />
        </el-form-item>
        <el-form-item label="序列编码：" prop="sequenceCode">
          <el-input v-model="sequenceInfo.sequenceCode" :disabled="true" />
        </el-form-item>
        <el-form-item label="是否带流水号：" prop="isSerialNumber">
          <el-radio-group v-model="sequenceInfo.isSerialNumber" :disabled="true">
            <el-radio value="Y" size="large">是</el-radio>
            <el-radio value="N" size="large">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="序列格式：" prop="sequenceName">
          <el-input v-model="sequenceInfo.sequenceFormat" :disabled="true" />
        </el-form-item>
        <el-row :gutter="10">
          <el-col :span="10">
            <el-form-item label="字段类型：" prop="fieldType">
              <el-select v-model="sequenceFieldInfo.fieldType" @change="handleSelectField" clearable>
                <el-option v-for="dict in copySequenceFieldOptions" :key="dict.dictValue" :label="dict.dictLabel"
                  :value="dict.dictValue" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="字段值：" prop="fieldValue">
              <el-input v-if="sequenceFieldInfo.fieldType !== 'datetime'" v-model="sequenceFieldInfo.fieldValue" 
              :disabled="sequenceFieldInfo.fieldType == 'company_code' || 
              sequenceFieldInfo.fieldType == 'dept_code' || 
              sequenceFieldInfo.fieldType == 'serial_number'" 
              :placeholder="fieldValuePlaceholder()"/>
              <el-select v-else v-model="sequenceFieldInfo.fieldValue" clearable>
                <el-option v-for="dict in dateFormatList" :key="dict.dictValue" :label="dict.dictValue"
                  :value="dict.dictValue" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item>
              <add-button @click="handleAddField" text="增加字段" />
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 表头 -->
        <el-row class="custom-table">
          <el-col :span="6" class="table-header">字段类型</el-col>
          <el-col :span="8" class="table-header">字段值</el-col>
          <el-col :span="4" class="table-header">排序</el-col>
          <el-col :span="6" class="table-header">操作</el-col>
        </el-row>

        <!-- 遍历 fieldList -->
        <template v-for="(item, index) in sequenceInfo.fieldList" :key="item.sequenceFieldId">
          <el-row class="table-row">
            <el-col :span="6" class="table-cell">
              {{ selectDictLabel(sequenceFieldOptions, item.fieldType) }}
            </el-col>
            <el-col :span="8" class="table-cell">
              {{ item.fieldValue }}
            </el-col>
            <el-col :span="4" class="table-cell">
              {{ item.sort }}
            </el-col>
            <el-col :span="6" class="table-cell">
              <!-- 上移、下移和删除按钮 -->
              <text-button @click="moveUp(index)" v-if="index !== 0" text="上移" />
              <text-button @click="moveDown(index)" v-if="index !== sequenceInfo.fieldList.length - 1" text="下移" />
              <text-button @click="removeField(index)" v-if="item.fieldType !== 'serial_number'" text="删除" />
            </el-col>
          </el-row>
        </template>
      </el-form>
      <template #footer>
        <dialog-footer @ok="submitConfigForm" @cancel="cancelConfig" />
      </template>
    </drag-dialog>

    <!-- 测试对话框 -->
    <drag-dialog v-model="testDialogParams.open" :title="testDialogParams.title" @close="cancelTest" width="35%" align-center>
      <el-form :model="testInfo" label-width="auto" style="max-width: 100%">
        <div v-for="(item, index) in costomParamList" :key=index>
          <el-form-item :label="item">
            <el-input v-model="testInfo[item]" placeholder="请输入自定义参数值"/>
          </el-form-item>
        </div>
        <el-form-item label="序列格式">
          <el-input v-model="testDialogParams.sequenceFormat" :disabled="true" />
        </el-form-item>
        <el-form-item label="序列号">
          <el-input v-model="testDialogParams.sequenceNumber" :disabled="true" />
        </el-form-item>
      </el-form>
      <template #footer>
        <dialog-footer @ok="submitTestForm" @cancel="cancelTest" />
      </template>
    </drag-dialog>
  </div>
</template>

<style>
.custom-table {
  border-left: 1px solid #dcdcdc;  /* 整个表格的左边框 */
  border-right: 1px solid #dcdcdc; /* 整个表格的右边框 */
  border-bottom: 1px solid #dcdcdc; /* 整个表格的底边框 */
  width: 100%; /* 让表格宽度撑满 */
}

.table-header {
  border: 1px solid #dcdcdc; /* 表头有完整的上、左、右、下边框 */
  font-weight: bold;
  padding: 10px;
  text-align: center;
}

.table-cell {
  border-right: 1px solid #dcdcdc; /* 每个单元格的右边框 */
  border-left: 1px solid #dcdcdc;  /* 每个单元格的左边框 */
  border-bottom: 1px solid #dcdcdc; /* 每个单元格的底边框 */
  padding: 10px;
  text-align: center;
}

.table-row {
  display: flex;
}

</style>
